<template>
  <div class="app-container" id="user">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="店铺名称">
        <div>{{form.name}}</div>
      </el-form-item>
      <el-form-item label="店铺封面">
        <el-upload class="cover-uploader" action="" disabled :on-preview="handleAvatarPreview">
          <img v-if="form.avatar" :src="form.avatar" class="cover">
          <i v-else class="el-icon-plus cover-uploader-icon"></i>
        </el-upload>
        <el-dialog v-model="avatarVisible" size="tiny">
          <img width="100%" :src="avatarUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="店铺位置">
        <div>{{form.traffic}}</div>
      </el-form-item>
      <el-form-item label="店铺简介">
        <div>{{form.description}}</div>
      </el-form-item>
      <el-form-item label="其他设置">
        <el-tabs type="border-card" style="width:600px;">
          <el-tab-pane label="店铺优惠">
            <div class="p20" v-for="support in  form.supports">
              <span class="support-tip">{{support.type!=2?"价格优惠":"折扣优惠"}}</span>
              <span> : {{support.description}}</span>

            </div>
          </el-tab-pane>
          <el-tab-pane label="商家信息">
            <p>消费类型 ：{{form.sellType}}</p>
            <p>营业时间 ：{{form.sellTime}}</p>
            <p>详细地址 ：{{form.addressDetail}}</p>
            <p v-if="form.invoice==1">发票信息 ：{{form.invoiceText}}</p>
            <p v-else>发票信息 ：商家不提供发票</p>
            <p v-for="info in form.info">{{info.info_title}} : {{info.info}}</p>
          </el-tab-pane>
          <el-tab-pane label="商家公告">

            <p>{{form.bulletin}}</el-input>
            </p>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label="店铺图片">
        <el-upload list-type="picture-card" action="" disabled :on-preview="handlePictureCardPreview" :file-list="form.pics">
        </el-upload>
        <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateInfo">更改信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { getSellerInfo } from '@/api/seller'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      var self = this;
      return {
        multiple: false,
        seller_id: "",
        dialogPoiVisible: false,
        avatarVisible: false,
        avatarUrl: "",
        dialogImageUrl: "",
        dialogVisible: false,
        couponType: null,
        avator: "",
        invoice: false,
        vip: false,
        form: {
          name: "",
          description: "",
          bulletin: "",
          pics: [],
          avatar: "",
          supports: [],
          info: [
          ],
          typyName: ""
        },
      }
    },
    created() {

      let id = getToken()
      this.seller_id = id
      this.$nextTick(() => {
        getSellerInfo(id).then((res) => {

          if (res.message == "ok") {
            this.form = res.seller
            this.form.avatarUrl = [{ url: this.form.avatar }]
            this.form.supports = res.supports
            this.form.info = res.infos
            this.form.pics = res.pics

            if (this.form.type == 'hotel') {
              this.typyName = "住宿"
            } else if (this.form.type == 'car') {
              this.typyName = "出行"
            } else if (this.form.type == 'goods') {
              this.typyName = "玩乐用品"
            } else if (this.form.type == 'food') {
              this.typyName = "美食"
            } else if (this.form.type == 'else') {
              this.typyName = "其他"
            }

          }
        })
      })

    },
    methods: {
      updateInfo() {
        let sellerId = this.seller_id
        this.$router.push({ path: `/user/edit?sellerId=${sellerId}` })
      },
      handlePictureCardPreview(file) {
        this.dialogVisible = true
        this.dialogImageUrl = file.url

      },
      handleAvatarPreview(file) {

        this.avatarVisible = true
        this.form.avatar = file.url
      }
    }
  };

</script>
<style>
  .amap-demo {
    height: 300px;
  }
  
  .search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }
  
  #user .el-vue-search-box-container {
    position: absolute;
  }
  
  .amap-page-container {
    position: relative;
    height: 360px;
  }
  
  .cover-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .cover-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  
  .cover-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .cover {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .w100 {
    width: 100px;
  }
  
  .w200 {
    width: 200px;
  }
  
  .p20 {
    padding: 20px 0;
  }
  
  .support-tip {
    color: #666;
  }
</style>